<template>
	<cl-dialog
		:title="!detail.cus_mobile ? '补充手机号' : '编辑手机号'"
		width="500px"
		:visible.sync="visible"
		:before-close="beforeClose"
		@close="close"
		:props="{
			'close-on-click-modal': false,
			'append-to-body': true
		}"
	>
		<el-form ref="form" label-position="top" :model="form" :rules="rules" :disabled="saving">
			<el-form-item label="新手机号" prop="mobile">
				<el-input v-model.trim="form.mobile" placeholder="请输入新手机号" />
			</el-form-item>
		</el-form>
		<div class="pt-1 flex flex-justify-end">
			<el-button @click="close">取消</el-button>
			<el-button type="primary" :loading="saving" @click="submit">提交</el-button>
		</div>
	</cl-dialog>
</template>
<script>
import { validate } from "@/utils/validate";
export default {
	props: {
		detail: {
			type: Object,
			default: () => ({})
		}
	},
	data() {
		return {
			visible: false,
			saving: false,
			form: {
				mobile: ""
			},
			rules: {
				mobile: [
					{ required: true, message: "请输入新手机号" },
					{ pattern: validate.mobile, message: "新手机号格式不正确" }
				]
			}
		};
	},
	methods: {
		open() {
			this.visible = true;
		},
		beforeClose(done) {
			!this.saving && done();
		},
		close() {
			this.visible = false;
			this.reset();
		},
		reset() {
			this.$refs.form.resetFields();
		},
		submit() {
			this.$refs.form.validate(async (valid, errors) => {
				this.showFormErr(errors);
				if (!valid) return;
				const { cus_id, user_id } = this.detail;
				this.saving = true;
				await this.$service.customer
					.editMobile({
						cus_id,
						user_id,
						...this.form
					})
					.done(() => {
						this.saving = false;
					});
				this.$message.success("修改成功");
				this.$emit("confirm");
				this.close();
			});
		}
	}
};
</script>
